<template>
  <div class="index">
    <div class="search">
      <div class="top">
        <div class="search-box" @click="$router.push('/search')">
          <van-icon name="search" class="icon" />
          <span class="text">搜索</span>
        </div>
      </div>
    </div>
    <div class="tag">
      <div class="indexes" @click="onLoad(0)">推荐</div>
      <div
        class="indexes"
        v-for="(item, index) in myTagList.slice(1)"
        :key="index"
        @click="onLoad(item.id)"
      >
        {{ item.name }}
      </div>
      <div class="more" @click="show = true">
        <img src="@/assets/gengduo.png" alt="" />
      </div>
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      class="big"
    >
      <div v-for="(item, index) in articles" :key="index">
        <div class="article" v-if="item.cover.images.length === 0">
          <div class="title">{{ item.title }}</div>
          <div class="bottom">
            <span class="user">{{ item.aut_name }}</span>
            <span class="comment">{{ item.comm_count }}评论</span>
            <span class="time">{{ item.pubdate | hmfilter }}</span>
            <van-icon name="cross" class="del" @click="delShow = true" />
          </div>
        </div>
        <div class="article" v-else-if="item.cover.images.length === 3">
          <div class="title">{{ item.title }}</div>
          <div class="img">
            <img :src="item.cover.images[0]" alt="" />
            <img :src="item.cover.images[1]" alt="" />
            <img :src="item.cover.images[2]" alt="" />
          </div>
          <div class="bottom">
            <span class="user">{{ item.aut_name }}</span>
            <span class="comment">{{ item.comm_count }}评论</span>
            <span class="time">{{ item.pubdate | hmfilter }}</span>
            <van-icon name="cross" class="del" @click="delShow = true" />
          </div>
        </div>
        <div class="article" v-else-if="item.cover.images.length === 1">
          <div class="left">
            <div class="title">{{ item.title }}</div>
            <img :src="item.cover.images[0]" alt="" />
          </div>
          <div class="bottom">
            <span class="user">{{ item.aut_name }}</span>
            <span class="comment">{{ item.comm_count }}评论</span>
            <span class="time">{{ item.pubdate | hmfilter }}</span>
            <van-icon name="cross" class="del" @click="delShow = true" round />
          </div>
        </div>
      </div>
    </van-list>

    <van-popup
      round
      v-model="show"
      position="bottom"
      :style="{ height: '80%' }"
      class="popup"
    >
      <van-icon name="cross" class="cancel" @click="show = false" />
      <div class="my-channel">
        <div class="channel">
          <span class="my">我的频道</span>
          <span class="compile" v-if="ifShow" @click="editor">编辑</span>
          <span class="compile" v-else @click="complete">完成</span>
        </div>
        <div class="myTag">
          <div class="my-tag" @click="onLoad(0)">推荐</div>
          <div
            class="my-tag"
            v-for="(item, index) in myTagList.slice(1)"
            :key="index"
            @click="onLoad(item.id)"
          >
            {{ item.name }}
            <van-icon
              name="clear"
              class="fork"
              v-if="myshow"
              @click.stop="delList(item, index)"
            />
          </div>
        </div>
      </div>
      <div class="recommend">
        <div class="channel">
          <span class="my">频道推荐</span>
        </div>
        <div class="myTag">
          <div
            class="my-tag"
            v-for="(item, index) in tagList"
            :key="index"
            @click="onLoad(item.id)"
          >
            {{ item.name }}
            <van-icon
              name="add"
              v-if="myshow"
              class="add"
              @click.stop="getlist(item, index)"
            />
          </div>
        </div>
      </div>
    </van-popup>
    <van-popup v-model="delShow" class="report">内容</van-popup>
  </div>
</template>

<script>
import {
  getTagApi,
  getArticlesApi,
  getArtApi,
  getUserTagApi,
  putUserTagApi
} from '@/Api/home'
export default {
  data () {
    return {
      time: '',
      id: 0,
      total: 0,
      index: 0,
      delShow: false,
      tagList: [],
      myTagList: [],
      articles: [],
      show: false,
      ifShow: true,
      myshow: false,
      loading: false,
      finished: false,
      isLoading: false
    }
  },
  created () {
    this.time = new Date().getTime()
    this.getTag()
    this.onLoad()
    this.userTag()
  },
  methods: {
    async getTag () {
      const res = await getTagApi()
      this.tagList = res.data.data.channels
      setTimeout(() => {
        var arr = this.tagList.filter(item => {
          return !this.myTagList.some(itemB => itemB.id === item.id)
        })
        this.tagList = arr
      }, 1000)
    },
    async onLoad (id = 0) {
      this.index = id
      if (this.index === 0) {
        this.finished = false
        var res
        this.time = new Date().getTime()
        res = await getArticlesApi({
          channel_id: this.id,
          timestamp: this.time,
          with_top: 0
        })
        this.articles.push(...res.data.data.results)
        this.total = res.data.data.total_count
        this.loading = false
        if (this.articles.length >= this.total) {
          this.finished = true
        }
      } else {
        res = await getArtApi({
          id,
          page: 1,
          per_page: 20
        })
        this.articles = res.data.data.results
        this.total = res.data.data.total_count
      }
      this.loading = false
      if (this.articles.length >= this.total) {
        this.finished = true
      }
    },
    getlist (data, index) {
      this.myTagList.push(data)
      this.tagList.splice(index, 1)
    },
    delList (data, index) {
      this.tagList.push(data)
      this.myTagList.splice(index, 1)
    },
    async userTag () {
      const res = await getUserTagApi()
      this.myTagList = res.data.data.channels
    },
    // 编辑按钮
    editor () {
      this.ifShow = false
      this.myshow = true
    },
    // 完成按钮
    async complete () {
      this.ifShow = true
      this.myshow = false
      this.myTagList.forEach((item, index) => {
        item.seq = index + 1
      })
      const data = this.myTagList.slice(1).map(item => {
        return { id: item.id, seq: item.seq }
      })
      const res = await putUserTagApi({
        channels: data
      })
      console.log(res)
    }
  }
  // forEACH,.FILTER
}
</script>

<style lang="less" scoped>
.index {
  position: relative;
  .search {
    margin-bottom: 42px;
    .top {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 48px;
      background-color: #3296fa;
      overflow: hidden;
      .search-box {
        display: flex;
        width: 278px;
        height: 32px;
        background-color: #5babfb;
        border-radius: 16px;
        margin: 10px auto;
        color: #ffffff;
        justify-content: center;
        align-items: center;
        .text {
          font-size: 14px;
        }
        .icon {
          font-size: 18px;
        }
      }
    }
  }
  .tag {
    width: 90%;
    height: 42px;
    font-size: 14px;
    background-color: #fff;
    display: flex;
    position: fixed;
    left: 0;
    top: 48px;
    overflow-x: auto;
    overflow-y: auto;
    border-bottom: 1px solid #edeff3;
    .indexes {
      width: 96px;
      flex-shrink: 0;
      // flex: 1;
      height: 100%;
      text-align: center;
      line-height: 42px;
      border-right: 1px solid #edeff3;
      flex-shrink: 0;
    }
    .more {
      position: fixed;
      right: 0;
      top: 48px;
      background-color: #fff;
      padding: 11px 9px;
      img {
        width: 20px;
        height: 17px;
      }
    }
  }
  .big {
    margin-top: 91px;
    padding-bottom: 70px;
    .article {
      display: flex;
      flex-direction: column;
      padding: 0 12px 15px;
      border-bottom: 1px solid #edeff3;
      .title {
        text-overflow: ellipsis;
        overflow: hidden;
        flex: 1;
        font-size: 16px;
        color: #3a3a3a;
        margin-top: 14px;
      }
      .img {
        margin-top: 15px;
        img {
          width: 116px;
          height: 73px;
          margin-right: 1px;
        }
      }
      .bottom {
        display: flex;
        margin-top: 10px;
        .stick {
          font-size: 12px;
          color: #e22829;
        }
        span {
          font-size: 12px;
          color: #999999;
          margin-right: 10px;
        }
        .user {
          flex: 0.2;
        }
        .comment {
          flex: 0.2;
        }
        .time {
          flex: 1;
        }
        .del {
          position: static;
          font-size: 12px;
        }
      }
      .left {
        display: flex;
        img {
          flex-direction: row;
          width: 116px;
          height: 73px;
          margin-right: 1px;
          margin-top: 15px;
        }
      }
    }
  }
  .popup {
    padding: 12px;
    font-size: 16px;
    box-sizing: border-box;
    .cancel {
      padding: 3px;
    }
    .channel {
      margin-top: 26px;
      display: flex;
      .my {
        flex: 1;
      }
      .compile {
        width: 50px;
        height: 25px;
        font-size: 12px;
        text-align: center;
        line-height: 25px;
        margin: 0 auto;
        color: rgb(250, 127, 127);
        border: 1px solid rgb(250, 127, 127);
        border-radius: 15px;
      }
    }
    .myTag {
      display: flex;
      flex-wrap: wrap;
      .my-tag {
        position: relative;
        flex-wrap: wrap;
        font-size: 12px;
        width: 80px;
        height: 43px !important;
        margin-top: 24px;
        margin-right: 7px;
        text-align: center;
        line-height: 43px;
        background-color: #f4f5f6;
        .fork {
          font-size: 16px;
          position: absolute;
          top: -3px;
          right: -3px;
          color: rgb(148, 148, 148);
          // display: none;
        }
        .add {
          font-size: 16px;
          position: absolute;
          top: -3px;
          right: -3px;
          color: rgb(148, 148, 148);
        }
      }
    }
  }
}
.active {
  color: #333333;
}
.report {
  width: 80%;
  height: 200px;
  border-radius: 10px;
}
</style>
